<style lang="less" scoped>
  .page__wrapper {
    width: 100%;
    height: 100%;
  }
</style>

<template>
  <div class="page__wrapper">
    <simple-tree-table :table-column="tableColumn" :table-data="tableData">
      <!-- <template slot="searchSection">
        <simple-form v-model="searchModel" :form-field="searchFormField">
          <template slot="tableOperation">
            <el-button @click="handleDataSearch">{{$t('operation.search')}}</el-button>
          </template>
        </simple-form>
      </template> -->
      <template slot-scope="scope" slot="orgname">
        {{scope.row.orgname}}
      </template>
      <template slot-scope="scope" slot="type">
        {{ $getDictLabel({type: '单位类型', value: scope.row.type })}}
      </template>
      <template slot-scope="scope" slot="category">
        {{ $getDictLabel({type: '企业类型', value: scope.row.category })}}
      </template>
      <template slot-scope="scope" slot="status">
        {{ $getDictLabel({type: '状态', value: scope.row.status })}}
      </template>
      <template slot="operation" slot-scope="scope">
        <el-button circle icon="el-icon-search" :title="$t('operation.view')" @click="handleViewClick(scope.row)"></el-button>
        <el-button circle icon="el-icon-edit" :title="$t('operation.edit')" @click="handleEditClick(scope.row)"></el-button>
        <el-button circle icon="el-icon-plus" v-if="scope.row.parentorgids.split(',').length < 2" :title="$t('operation.create')" @click="handleAddClick(scope.row)"></el-button>
        <el-button @click="handleChangeStatus(scope.row, '0')" v-if="scope.row.status === '1'" circle :title="$t('operation.invalid')">
          <i class="iconfont icon-zuofei" style="font-size: 12px"></i>
        </el-button>
        <el-button @click="handleChangeStatus(scope.row, '1')" v-else circle :title="$t('operation.enable')">
          <i class="iconfont icon-qiyong" style="font-size: 12px"></i>
        </el-button>
      </template>
    </simple-tree-table>
    <detail-dialog :show-flag.sync="isShowDetailDialog" :detail-data="rowData" :ext-data="{sys_mid}" :view-flag="isViewFlag"></detail-dialog>
  </div>
</template>
<script>
import Axios from 'axios'
/** 混入分页信息及数据总数信息 */
import detailDialog from './detail'
const BASEURL = {
  list: `/web/sysadmin/ajax.html?sys_method=selectOrgByUser&sys_objName=Sys_Organization&sys_tableName=Sys_Organization`,
  updateOrgStatus: '/Web/SysAdmin/ajax.html?sys_method=updateOrgStatus&sys_objName=Sys_Organization',
  getInitConfig: '/web/sysadmin/ajax.html?sys_method=GetInitConfig'
}
export default {
  name: 'main_office',
  components: { detailDialog },
  data () {
    return {
      searchModel: {},
      rowData: {},
      /** 表格数据 */
      tableData: [],
      /** 是否显示详情页 dialog */
      isShowDetailDialog: false,
      /** 是否为查看数据 */
      isViewFlag: false,

      actionList: [],
      sys_mid: ''
    }
  },
  computed: {
    searchFormField () {
      return [
        { slotName: 'tableOperation', col: { span: 24, style: { textAlign: 'right' } }, labelWidth: '0' }
      ]
    },

    category () { return this.$getDictList('sys_office_category') },

    tableColumn () {
      return [
        { prop: 'orgname', label: this.$t('system_office.orgname'), width: 250, slotName: 'orgname' },
        { prop: 'orgfullname', label: this.$t('system_office.orgfullname'), width: 200 },
        { prop: 'orgcode', label: this.$t('system_office.orgcode'), width: 120 },
        { prop: 'type', label: this.$t('system_office.type'), width: 120, slotName: 'type' },
        { prop: 'category', label: this.$t('system_office.category'), width: 150, slotName: 'category' },
        { prop: 'address', label: this.$t('system_office.address'), width: 200 },
        { prop: 'phone', label: this.$t('system_office.phone'), width: 100 },
        { prop: 'status', label: this.$t('system_office.status'), width: 60, slotName: 'status' },
        { prop: 'remarks', label: this.$t('system_office.remarks'), width: 150 },

        { label: this.$t('field.operation'), slotName: 'operation', width: 125, fixed: 'right' }
      ]
    }
  },
  /**
   * 注入到子组件
   */
  provide () {
    return { handleDataSearch: this.handleDataSearch }
  },
  methods: {
    handleDataSearch () {
      let params = Object.assign({}, this.searchModel, { sys_mid: this.sys_mid })

      let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      this.$axios
        .post(BASEURL.list, params)
        .then(resp => {
          this.tableData = this.$utils.transformOrgTree(resp.rows)
        })
        .finally(() => {
          loadingFlag.close()
        })
    },
    handleAddClick (row) {
      this.rowData = { _parent: this.$_.cloneDeep(row) }
      this.isViewFlag = false
      this.isShowDetailDialog = true
    },
    handleViewClick (row) {
      this.rowData = this.$_.cloneDeep(row)
      this.isViewFlag = true
      this.isShowDetailDialog = true
    },
    handleEditClick (row) {
      this.rowData = this.$_.cloneDeep(row)
      this.isViewFlag = false
      this.isShowDetailDialog = true
    },

    handleInitData () {
      let configLoadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })
      this.$axios
        .post(BASEURL.getInitConfig, {})
        .then(resp => {
          // 设置 actionList及sys_mid
          this.actionList = resp.actionKeys.split(',')

          this.sys_mid = resp.mid
          /** 设置列表及涉及主数据请求参数 */
          let params = Object.assign({}, this.tablePageInfo, { sys_mid: resp.mid })
          let loadingFlag = this.$loading({ fullscreen: false, target: this.$el, text: this.$t('tip.systemLoading') })

          Axios.all([
            this.$axios.post(BASEURL.list, params)
          ])
            .then(Axios.spread((pageData) => {
              this.tableData = this.$utils.transformOrgTree(pageData.rows)
            }))
            .finally(() => {
              loadingFlag.close()
            })
        })
        .finally(() => {
          configLoadingFlag.close()
        })
    },

    handleChangeStatus (row, status) {
      this.$msgbox({
        title: this.$t('tip.warning'),
        message: row.status === '1' ? this.$t('tip.confirmInvalid') : this.$t('tip.confirmEnable'),
        type: 'warning',
        showCancelButton: true,
        closeOnClickModal: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            this.$axios
              .post(BASEURL.updateOrgStatus, { orgid: row.orgid, status })
              .then(resp => {
                this.$message({ type: 'success', message: this.$t('tip.saveSuccess') })
              })
              .finally(() => {
                instance.confirmButtonLoading = false
                done()
              })
          } else done()
        }
      })
        .then(() => {
          this.handleDataSearch()
        })
    }
  },
  mounted () {
    // this.handleDataSearch()
    this.handleInitData()
  }
}
</script>
